<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <style type="text/css">
      html,
      body,
      .map {
        width: 100%;
        background: white !important;
        height: 100%;
        margin: 0px;
      }
    </style>
    <title>简易行政区地图标注</title>
  </head>
  <body>
    <div id="container" class="map" tabindex="0"></div>
    <script
      language="javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"
    ></script>
    <script
      type="text/javascript"
      src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"
    ></script>

    <script type="text/javascript">
      var SOC = 'CHN'
      var colors = {}
      var GDPSpeed = {
        520000: 10, //贵州
        540000: 10, //西藏
        530000: 8.5, //云南
        500000: 8.5, //重庆
        360000: 8.5, //江西
        340000: 8.0, //安徽
        510000: 7.5, //四川
        350000: 8.5, //福建
        430000: 8.0, //湖南
        420000: 7.5, //湖北
        410000: 7.5, //河南
        330000: 7.0, //浙江
        640000: 7.5, //宁夏
        650000: 7.0, //新疆
        440000: 7.0, //广东
        370000: 7.0, //山东
        450000: 7.3, //广西
        630000: 7.0, //青海
        320000: 7.0, //江苏
        140000: 6.5, //山西
        460000: 7, // 海南
        310000: 6.5, //上海
        110000: 6.5, // 北京
        130000: 6.5, // 河北
        230000: 6, // 黑龙江
        220000: 6, // 吉林
        210000: 6.5, //辽宁
        150000: 6.5, //内蒙古
        120000: 5, // 天津
        620000: 6, // 甘肃
        610000: 8.5, // 甘肃
        710000: 2.64, //台湾
        810000: 3.0, //香港
        820000: 4.7, //澳门
      }
      var getColorByDGP = function (adcode) {
        if (!colors[adcode]) {
          var gdp = GDPSpeed[adcode]
          if (!gdp) {
            colors[adcode] = 'rgb(227,227,227)'
          } else {
            var r = 3
            var g = 140
            var b = 230
            var a = gdp / 10
            colors[adcode] = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
          }
        }
        return colors[adcode]
      }

      var disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: 'CHN',
        depth: 1,
        styles: {
          'nation-stroke': '#ff0000',
          'coastline-stroke': '#0088ff',
          'province-stroke': 'grey',
          fill: function (props) {
            return getColorByDGP(props.adcode_pro)
          },
        },
      })

      var map = new AMap.Map('container', {
        zooms: [4, 10],
        center: [106.122082, 33.719192],
        zoom: 4,
        isHotspot: false,
        defaultCursor: 'pointer',
        layers: [disCountry],
        viewMode: '3D',
      })
      map.addControl(new AMap.Scale())
      map.addControl(new AMap.ToolBar({ liteStyle: true }))
      map.on('complete', function () {
        var layer = new AMap.LabelsLayer({
          // 开启标注避让，默认为开启，v1.4.15 新增属性
          collision: false,
          // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          animation: true,
        })
        for (var i = 0; i < LabelsData.length; i++) {
          var labelsMarker = new AMap.LabelMarker(LabelsData[i])
          layer.add(labelsMarker)
        }
        map.add(layer)
      })

      document.getElementsByClassName('amap-mcode')[0].innerHTML =
        '-GS(2019)756号'
    </script>
  </body>
</html>
